<template>
  <div class="picture-search-form">
    <a-config-provider :locale="zhCN">
      <!-- 搜索管理 -->
      <a-form layout="inline" :model="searchParams" @finish="doSearch" class="search-form">
        <a-space size="middle" class="search-space">
          <a-form-item label="关键词" name="searchText">
            <a-input
              v-model:value="searchParams.searchText"
              placeholder="从名称和简介搜索"
              allow-clear
              style="width: 180px;"
            />
          </a-form-item>
          <a-form-item label="类型" name="category">
            <a-select
              v-model:value="searchParams.category"
              placeholder="请输入类型"
              :options="categoryList"
              style="min-width: 150px"
              allow-clear
            />
          </a-form-item>


          <a-form-item label="标签" name="tags">
            <a-select
              v-model:value="searchParams.tags"
              placeholder="请输入标签"
              mode="tags"
              :options="tagList"
              style="min-width: 150px"
              allow-clear
            />
          </a-form-item>
          <a-form-item label="日期" name="dateRange">
            <a-range-picker
              v-model:value="dateRange"
              style="width: 240px"
              show-time
              :placeholder="['开始日期', '结束时间']"
              format="YYYY/MM/DD HH:mm:ss"
              :presets="rangePresets"
              @change="onRangeChange"
            />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" style="margin-top: 10px">搜索</a-button>
          </a-form-item>
        </a-space>
      </a-form>
    </a-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import {
   listPictureTagCategoryUsingGet,
} from '@/apis/PictureInterface.ts'
import { message } from 'ant-design-vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import dayjs from 'dayjs'

// 获取分类及标签
const categoryList = ref<string[]>([])
const tagList = ref<string[]>([])
const getTagAndCategory = async () => {
  try {
    const res = await listPictureTagCategoryUsingGet()
    if (res.data.code === 0 && res.data.data) {
      categoryList.value = (res.data.data.categoryList ?? []).map((data: string) => {
        return {
          value: data,
          label: data,
        }
      })
      tagList.value = (res.data.data.tagList ?? []).map((data: string) => {
        return {
          value: data,
          label: data,
        }
      })
    } else {
      message.error('获取标签和分类失败，' + res.data.message)
    }
  } catch (error) {
    message.error('获取标签和分类失败', error.message)
  }
}

// 每次页面刷新时只需要触发一次即可
onMounted(() => {
  getTagAndCategory()
})

// 搜索条件
const searchParams = reactive<API.PictureQueryRequest>({
})
// 定义组件属性
interface Props {
  onSearch?: (searchParams: API.PictureQueryRequest) => void
}
const props = defineProps<Props>()

// 获取数据
const doSearch = () => {
  // 重置搜索条件
  console.log(searchParams.tags)
  console.log(searchParams.tags)
  props.onSearch?.(searchParams)
}


// 定义时间范围
const dateRange = ref<[]>([])
// 时间更改时触发
const onRangeChange = (dates: any[], dateStrings: string[]) => {
  if (dates.length < 2) {
    searchParams.startEditTime = undefined
    searchParams.endEditTime = undefined
  } else {
    searchParams.startEditTime = dates[0].toDate()
    searchParams.endEditTime = dates[1].toDate()
  }
}
const rangePresets = ref([
  { label: '过去 7 天', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: '过去 14 天', value: [dayjs().add(-14, 'd'), dayjs()] },
  { label: '过去 30 天', value: [dayjs().add(-30, 'd'), dayjs()] },
  { label: '过去 90 天', value: [dayjs().add(-90, 'd'), dayjs()] },
])

</script>


<style scoped>
.picture-search-form {
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 16px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.search-space {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


</style>
